<template>
  <div>
    <div class="alarmPopUps">
      <div class="alarmPopUps_title">
        <div class="flex">
          <IconifyIconOffline
            :icon="infoFilled"
            width="24px"
            height="24px"
            class="text-[#ffffff] mr-[7px]"
          />
          <div class="text-[#ffffff]">人员入侵告警</div>
        </div>
        <IconifyIconOffline
          :icon="closeLine"
          width="30px"
          height="30px"
          class="text-[#ffffff]"
        />
      </div>
      <div class="alarmPopUps_content">
        <div>
          <el-image
            class="imgae"
            :src="alarmData.image"
            fit="fill"
            draggable="false"
          />
        </div>
        <div>
          <div class="mb-[5px]">时间：{{ alarmData.updated_at }}</div>
          <div class="mb-[5px]">设备：{{ alarmData.device_id }}</div>
          <div class="mb-[5px]">位置：{{ alarmData.location }}</div>
        </div>
      </div>
      <div />
    </div>
  </div>
</template>

<script setup lang="ts">
import infoFilled from "@iconify-icons/ep/info-filled";
import closeLine from "@iconify-icons/ri/close-line";
import { useAlarmWebsocketHook } from "@/store/modules/alarmWebSocket";
const { alarmData } = useAlarmWebsocketHook() as any;
</script>
<style scoped lang="scss">
.alarmPopUps {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100000;
  width: 480px;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(to right, #f56c6c, #fecaca, #f56c6c);
  background-size: 200%;
  border: 1px solid #f56c6c;
  border-radius: 3px;
  animation: color-change 6s infinite;
}

@keyframes color-change {
  0% {
    background-position: 100%;
  }

  25% {
    background-position: 150%;
  }

  50% {
    background-position: 200%;
  }

  75% {
    background-position: 150%;
  }

  100% {
    background-position: 100%;
  }
}

.alarmPopUps_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 10px;
}

.alarmPopUps_content {
  display: flex;
  height: 250px;
  padding: 10px;
  background: #fff;
}

.imgae {
  width: 200px;
  height: 150px;
  margin-right: 10px;
}
</style>
